<template>
  <div class="badge">
    <el-badge :value="value" :max="max" :is-dot="isDot">
      <component :is="`el-icon-${toLine(icon)}`"></component>
    </el-badge>
  </div>
</template>

<script lang="ts" setup>
import { validate } from "@babel/types";
import { and } from "@vueuse/shared";
import { toLine } from "../../../utils";
let props = defineProps({
  // 自定义图标
  icon: {
    type: String,
    default: "Bell",
  },
  // 数量
  value: {
    type: [String, Number],
    default: "0",
    required: true,
    validator: (value: string): boolean => {
      return value ? true : false;
    },
  },
  // 最大数量
  max: {
    type: Number,
    default: 9999,
  },
  // 是否是一个圆点
  isDot: {
    type: Boolean,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.badge{
  width: fit-content;
}
</style>
